<!doctype html>




<html class="theme-next pisces" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
    
  
  <link href="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  
    
      
    

    
  

  

  
    
      
    

    
  

  
    
      
    

    
  

  
    
    
    <link href="//fonts.lug.ustc.edu.cn/css?family=Monda:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Lobster Two:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






  

<link href="//cdn.staticfile.org/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Web,JavaScript," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />






<meta name="description" content="BOMECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript ，那么 BOM(浏览器对象模型)则无疑才是真正的核心。
window 对象它表示浏览器的一个实例。它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其">
<meta property="og:type" content="article">
<meta property="og:title" content="《 JavaScript 高级程序设计》备忘-第八章-1">
<meta property="og:url" content="http://codingme.xyz/2016/09/29/javascript-note-08-1/index.html">
<meta property="og:site_name" content="CodingMe">
<meta property="og:description" content="BOMECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript ，那么 BOM(浏览器对象模型)则无疑才是真正的核心。
window 对象它表示浏览器的一个实例。它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其">
<meta property="og:updated_time" content="2016-10-18T06:23:42.210Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="《 JavaScript 高级程序设计》备忘-第八章-1">
<meta name="twitter:description" content="BOMECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript ，那么 BOM(浏览器对象模型)则无疑才是真正的核心。
window 对象它表示浏览器的一个实例。它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"right","display":"post"},
    fancybox: true,
    motion: false,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://codingme.xyz/2016/09/29/javascript-note-08-1/"/>





  <title> 《 JavaScript 高级程序设计》备忘-第八章-1 | CodingMe </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-right page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">CodingMe</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle"></p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup">
 <span class="search-icon fa fa-search"></span>
 <input type="text" id="local-search-input">
 <div id="local-search-result"></div>
 <span class="popup-btn-close">close</span>
</div>


    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
  <link itemprop="mainEntityOfPage" href="http://codingme.xyz/2016/09/29/javascript-note-08-1/">

  <span style="display:none" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="Huang SJ">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="/uploads/avatar.jpg">
  </span>

  <span style="display:none" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="CodingMe">
    <span style="display:none" itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
      <img style="display:none;" itemprop="url image" alt="CodingMe" src="">
    </span>
  </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                《 JavaScript 高级程序设计》备忘-第八章-1
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            

            

            
          </span>

          

          
            
          

          

          
          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="BOM"><a href="#BOM" class="headerlink" title="BOM"></a>BOM</h1><p>ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript ，那么 BOM(浏览器对象模型)则无疑才是真正的核心。</p>
<h2 id="window-对象"><a href="#window-对象" class="headerlink" title="window 对象"></a>window 对象</h2><p>它表示浏览器的一个实例。<br>它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。<br>这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问parseInt() 等方法。</p>
<h3 id="全局作用域"><a href="#全局作用域" class="headerlink" title="全局作用域"></a>全局作用域</h3><p>由于 window 对象同时扮演着 ECMAScript中 Global 对象的角色，因此所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> age = <span class="number">29</span>;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">sayAge</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    alert(<span class="keyword">this</span>.age);</div><div class="line">&#125;</div><div class="line">alert(<span class="built_in">window</span>.age); <span class="comment">//29</span></div><div class="line">sayAge(); <span class="comment">//29</span></div><div class="line"><span class="built_in">window</span>.sayAge(); <span class="comment">//29</span></div></pre></td></tr></table></figure>
<p>由于 sayAge() 存在于全局作用域中，因此 this.age 被映射到 window.age 。<br>定义全局变量与在 window 对象上直接定义属性还是有一点差别：全局变量不能通过 delete 操作符删除，而直接在 window 对象上的定义的属性可以。<br><a id="more"></a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> age = <span class="number">29</span>;</div><div class="line"><span class="built_in">window</span>.color = <span class="string">"red"</span>;</div><div class="line"><span class="comment">//在 IE &lt; 9 时抛出错误，在其他所有浏览器中都返回 false</span></div><div class="line"><span class="keyword">delete</span> <span class="built_in">window</span>.age;</div><div class="line"><span class="comment">//在 IE &lt; 9 时抛出错误，在其他所有浏览器中都返回 true</span></div><div class="line"><span class="keyword">delete</span> <span class="built_in">window</span>.color; <span class="comment">//returns true</span></div><div class="line">alert(<span class="built_in">window</span>.age); <span class="comment">//29</span></div><div class="line">alert(<span class="built_in">window</span>.color); <span class="comment">//undefined</span></div></pre></td></tr></table></figure>
<p>使用 var 语句添加的 window (全局)属性有一个名为 [[Configurable]] 的特性，这个特性的值被设置为 false ，因此这样定义的属性不可以通过 delete 操作符删除。</p>
<p>尝试访问未声明的变量会抛出错误，但是通过查询 window 对象，可以知道某个可能未声明的变量是否存在。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//这里会抛出错误，因为 oldValue 未定义</span></div><div class="line"><span class="keyword">var</span> newValue = oldValue;</div><div class="line"><span class="comment">//这里不会抛出错误，因为这是一次属性查询</span></div><div class="line"><span class="comment">//newValue 的值是 undefined</span></div><div class="line"><span class="keyword">var</span> newValue = <span class="built_in">window</span>.oldValue;</div></pre></td></tr></table></figure>
<p>很多全局 JavaScript 对象(如 location 和 navigator )实际上都是 window对象的属性。</p>
<h3 id="窗口关系及框架"><a href="#窗口关系及框架" class="headerlink" title="窗口关系及框架"></a>窗口关系及框架</h3><p>如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。<br>在 frames集合中，可以通过数值索引(从 0 开始，从左至右，从上到下)或者框架名称来访问相应的 window 对象。<br>每个 window 对象都有一个 name 属性，其中包含框架的名称。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Frameset Example<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">frameset</span> <span class="attr">rows</span>=<span class="string">"160,*"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"frame.htm"</span> <span class="attr">name</span>=<span class="string">"topFrame"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">frameset</span> <span class="attr">cols</span>=<span class="string">"50%,50%"</span>&gt;</span></div><div class="line">                <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"anotherframe.htm"</span> <span class="attr">name</span>=<span class="string">"leftFrame"</span>&gt;</span></div><div class="line">                <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"yetanotherframe.htm"</span> <span class="attr">name</span>=<span class="string">"rightFrame"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">frameset</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">frameset</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<p>以上代码创建了一个框架集，其中一个框架居上，两个框架居下。<br>对这个例子而言，可以通过window.frames[0] 或者 window.frames[“topFrame”] 来引用上方的框架。<br>不过，恐怕你最好使用 top 而非 window 来引用这些框架(例如，通过 top.frames[0] )。<br>top 对象始终指向最高(最外)层的框架，也就是浏览器窗口。</p>
<p>访问框架的方式例子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">window</span>.frames[<span class="number">0</span>];</div><div class="line"><span class="built_in">window</span>.frames[<span class="string">"topFrame"</span>];</div><div class="line">top.frames[<span class="number">0</span>];</div><div class="line">top.frames[<span class="string">"topFrame"</span>];</div><div class="line">frames[<span class="number">0</span>];</div><div class="line">frames[<span class="string">"topFrame"</span>];</div></pre></td></tr></table></figure>
<p>与 top 相对的另一个 window 对象是 parent 。顾名思义， parent (父)对象始终指向当前框架的直接上层框架。<br>在某些情况下， parent 有可能等于 top ；但在没有框架的情况下， parent 一定等于 top (此时它们都等于 window )。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Frameset Example<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">frameset</span> <span class="attr">rows</span>=<span class="string">"100,*"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"frame.htm"</span> <span class="attr">name</span>=<span class="string">"topFrame"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">frameset</span> <span class="attr">cols</span>=<span class="string">"50%,50%"</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"anotherframe.htm"</span> <span class="attr">name</span>=<span class="string">"leftFrame"</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"anotherframeset.htm"</span> <span class="attr">name</span>=<span class="string">"rightFrame"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">frameset</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">frameset</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Frameset Example<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">frameset</span> <span class="attr">cols</span>=<span class="string">"50%,50%"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"red.htm"</span> <span class="attr">name</span>=<span class="string">"redFrame"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"blue.htm"</span> <span class="attr">name</span>=<span class="string">"blueFrame"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">frameset</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<p>这个框架集中的一个框架包含了另一个框架集。浏览器在加载完第一个框架集以后，会继续将第二个框架集加载到 rightFrame 中。<br>如果代码位于 redFrame (或 blueFrame )中，那么 parent 对象指向的就是 rightFrame 。<br>如果代码位于 topFrame 中，则 parent 指向的是 top ，因为 topFrame 的直接上层框架就是最外层框架。</p>
<p>除非<strong>最高层窗口</strong>是通过 window.open() 打开的，否则<strong>其 window 对象的 name 属性</strong>不会包含任何值。</p>
<p>self 对象它始终指向 window ；实际上， self 和 window 对象可以互换使用。<br>引入 self 对象的目的只是为了与 top 和 parent 对象对应起来，因此它不格外包含其他值。</p>
<p>所有这些对象都是 window 对象的属性，可以通过 window.parent 、 window.top 等形式来访问。<br>同时，这也意味着可以将不同层次的 window 对象连缀起来，例如 window.parent.parent.frames[0] 。</p>
<p>在使用框架的情况下，浏览器中会存在多个Global 对象。在每个框架中定义的全局变量会自动成为框架中window 对象的属性。<br>由于每个window 对象都包含原生类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等。<br>例如，top.Object 并不等于top.frames[0].Object。这个问题会影响到对跨框架传递的对象使用 instanceof 操作符。</p>
<h3 id="窗口位置"><a href="#窗口位置" class="headerlink" title="窗口位置"></a>窗口位置</h3><p>IE、Safari、Opera 和Chrome 都提供了screenLeft 和screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。<br>用来确定和修改window 对象位置的属性和方法有很多。<br>Firefox 则在 screenX 和screenY 属性中提供相同的窗口位置信息，Safari 和 Chrome 也同时支持这两个属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> leftPos = (<span class="keyword">typeof</span> <span class="built_in">window</span>.screenLeft == <span class="string">"number"</span>) ?</div><div class="line"><span class="built_in">window</span>.screenLeft : <span class="built_in">window</span>.screenX;</div><div class="line"><span class="keyword">var</span> topPos = (<span class="keyword">typeof</span> <span class="built_in">window</span>.screenTop == <span class="string">"number"</span>) ?</div><div class="line"><span class="built_in">window</span>.screenTop : <span class="built_in">window</span>.screenY;</div></pre></td></tr></table></figure>
<p>这个例子运用二元操作符首先确定screenLeft 和screenTop 属性是否存在，<br>如果是(在IE、Safari、Opera 和Chrome 中)，则取得这两个属性的值。<br>如果不存在(在Firefox 中)，则取得screenX和 screenY 的值。<br>在使用这些值的过程中，还必须注意一些小问题。</p>
<p>在IE、Opera 中，screenLeft 和screenTop 中保存的是从屏幕左边和上边到由window 对象表示的页面可见区域的距离。<br>如果window 对象是最外层对象，而且浏览器窗口紧贴屏幕最上端——即y 轴坐标为0，那么screenTop 的值就是<strong>位于页面可见区域上方的浏览器工具栏的像素高度</strong>。<br>在Chrome、Firefox 和Safari 中，screenY 或screenTop中保存的是整个浏览器窗口相对于屏幕的坐标值，即在窗口的y 轴坐标为0 时返回0。</p>
<p>Firefox、Safari 和Chrome 始终返回页面中每个框架的top.screenX 和top.screenY 值。<br>即使在页面由于被设置了外边距而发生偏移的情况下，相对于window 对象使用screenX 和screenY 每次也都会返回相同的值。<br>而IE 和Opera 则会给出框架相对于屏幕边界的精确坐标值。</p>
<p>最终结果，就是无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。然而，使用moveTo()和moveBy()方法倒是有可能将窗口精确地移动到一个新位置。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//将窗口移动到屏幕左上角</span></div><div class="line"><span class="built_in">window</span>.moveTo(<span class="number">0</span>,<span class="number">0</span>);</div><div class="line"><span class="comment">//将窗向下移动100 像素</span></div><div class="line"><span class="built_in">window</span>.moveBy(<span class="number">0</span>,<span class="number">100</span>);</div><div class="line"><span class="comment">//将窗口移动到(200,300)</span></div><div class="line"><span class="built_in">window</span>.moveTo(<span class="number">200</span>,<span class="number">300</span>);</div><div class="line"><span class="comment">//将窗口向左移动50 像素</span></div><div class="line"><span class="built_in">window</span>.moveBy(<span class="number">-50</span>,<span class="number">0</span>);</div></pre></td></tr></table></figure>
<p>需要注意的是，这两个方法可能会被浏览器禁用；而且，在Opera 和IE 7(及更高版本)中默认就是禁用的。<br>另外，这两个方法都不适用于框架，只能对最外层的window 对象使用。</p>
<h3 id="窗口大小"><a href="#窗口大小" class="headerlink" title="窗口大小"></a>窗口大小</h3><p>IE9+、Firefox、Safari、Opera 和Chrome 均提供了4 个属性：innerWidth、innerHeight、outerWidth 和outerHeight。<br>在IE9+、Safari 和Firefox中，outerWidth 和outerHeight 返回浏览器窗口本身的尺寸(无论是从最外层的window 对象还是从某个框架访问)。<br>而innerWidth 和innerHeight则表示该容器中页面视图区的大小(减去边框宽度)。<br>在Chrome 中，outerWidth、outerHeight 与innerWidth、innerHeight 返回相同的值，即视口(viewport)大小而非浏览器窗口大小。</p>
<p>在IE、Firefox、Safari、Opera 和Chrome 中，document.documentElement.clientWidth 和document.documentElement.clientHeight 中保存了页面视口的信息。<br>在IE6 中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过document.body.clientWidth 和document.body.clientHeight 取得相同信息。<br>而对于混杂模式下的Chrome，则无论通过document.documentElement还是document.body 中的clientWidth 和clientHeight 属性，都可以取得视口的大小。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> pageWidth = <span class="built_in">window</span>.innerWidth,</div><div class="line">pageHeight = <span class="built_in">window</span>.innerHeight;</div><div class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> pageWidth != <span class="string">"number"</span>)&#123;</div><div class="line">    <span class="keyword">if</span> (<span class="built_in">document</span>.compatMode == <span class="string">"CSS1Compat"</span>)&#123;</div><div class="line">        pageWidth = <span class="built_in">document</span>.documentElement.clientWidth;</div><div class="line">        pageHeight = <span class="built_in">document</span>.documentElement.clientHeight;</div><div class="line">    &#125; <span class="keyword">else</span> &#123;</div><div class="line">        pageWidth = <span class="built_in">document</span>.body.clientWidth;</div><div class="line">        pageHeight = <span class="built_in">document</span>.body.clientHeight;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>先将window.innerWidth 和window.innerHeight 的值分别赋给了pageWidth 和pageHeight。<br>然后检查pageWidth 中保存的是不是一个数值；如果不是，则通过检查document.compatMode 来确定页面是否处于标准模式。<br>如果是，则分别使用document.documentElement.clientWidth 和document.documentElement.clientHeight 的值。<br>否则，就使用document.body.clientWidth 和document.body.clientHeight 的值。</p>
<p>对于移动设备，window.innerWidth 和window.innerHeight 保存着可见视口，也就是屏幕上可见页面区域的大小。<br>在其他移动浏览器中，document.documentElement 度量的是布局视口，即渲染后页面的实际大小(与可见视口不同，可见视口只是整个页面中的一小部分)。</p>
<p>使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//调整到100×100</span></div><div class="line"><span class="built_in">window</span>.resizeTo(<span class="number">100</span>, <span class="number">100</span>);</div><div class="line"><span class="comment">//调整到200×150</span></div><div class="line"><span class="built_in">window</span>.resizeBy(<span class="number">100</span>, <span class="number">50</span>);</div><div class="line"><span class="comment">//调整到 300×300</span></div><div class="line"><span class="built_in">window</span>.resizeTo(<span class="number">300</span>, <span class="number">300</span>);</div></pre></td></tr></table></figure>
<p>这两个方法与移动窗口位置的方法类似，也有可能被浏览器禁用；在Opera和 IE7(及更高版本)中默认就是禁用的。<br>另外，这两个方法同样不适用于框架，而只能对最外层的window 对象使用。</p>
<h3 id="导航和打开窗口"><a href="#导航和打开窗口" class="headerlink" title="导航和打开窗口"></a>导航和打开窗口</h3><p>window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。<br>接收4 个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。<br>通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//等同于&lt;a href="http://www.wrox.com" target="topFrame"&gt;&lt;/a&gt;</span></div><div class="line"><span class="built_in">window</span>.open(<span class="string">"http://www.wrox.com/"</span>, <span class="string">"topFrame"</span>);</div></pre></td></tr></table></figure>
<p>如果有一个名叫”topFrame”的窗口或者框架，就会在该窗口或框架加载这个URL；否则，就会创建一个新窗口并将其命名为”topFrame”。<br>此外，第二个参数也可以是下列任何一个特殊的窗口名称：_self、_parent、_top 或_blank。</p>
<h4 id="弹出窗口"><a href="#弹出窗口" class="headerlink" title="弹出窗口"></a>弹出窗口</h4><p>如果给window.open()传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。<br>如果没有传入第三个参数，那么就会打开一个带有全部默认设置(工具栏、地址栏和状态栏等)的新浏览器窗口(或者打开一个新标签页——根据浏览器设置)。<br>在不打开新窗口的情况下，会忽略第三个参数。<br>第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。</p>
<pre><code>fullscreen yes或no 表示浏览器窗口是否最大化。仅限IE
height 数值 表示新窗口的高度。不能小于100
left 数值 表示新窗口的左坐标。不能是负值
location yes或no 表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。
如果设置为no，地址栏可能会隐藏，也可能会被禁用(取决于浏览器)
menubar yes或no 表示是否在浏览器窗口中显示菜单栏。默认值为no
resizable yes或no 表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为no
scrollbars yes或no 表示如果内容在视口中显示不下，是否允许滚动。默认值为no
status yes或no 表示是否在浏览器窗口中显示状态栏。默认值为no
toolbar yes或no 表示是否在浏览器窗口中显示工具栏。默认值为no
top 数值 表示新窗口的上坐标。不能是负值
width 数值 表示新窗口的宽度。不能小于100
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">window</span>.open(<span class="string">"http://www.wrox.com/"</span>,<span class="string">"wroxWindow"</span>,</div><div class="line"><span class="string">"height=400,width=400,top=10,left=10,resizable=yes"</span>);</div></pre></td></tr></table></figure>
<p>这行代码会打开一个新的可以调整大小的窗口，窗口初始大小为400×400 像素，并且距屏幕上沿和左边各10 像素。</p>
<p><strong>window.open()方法会返回一个指向新窗口的引用</strong>。引用的对象与其他window 对象大致相似，但我们可以对其进行更多控制。<br>有些浏览器在默认情况下可能不允许我们针对主浏览器窗口调整大小或移动位置，但却允许我们针对通过window.open()创建的窗口调整大小或移动位置。<br>通过这个返回的对象，可以像操作其他窗口一样操作新打开的窗口。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> wroxWin = <span class="built_in">window</span>.open(<span class="string">"http://www.wrox.com/"</span>,<span class="string">"wroxWindow"</span>,</div><div class="line"><span class="string">"height=400,width=400,top=10,left=10,resizable=yes"</span>);</div><div class="line"><span class="comment">//调整大小</span></div><div class="line">wroxWin.resizeTo(<span class="number">500</span>,<span class="number">500</span>);</div><div class="line"><span class="comment">//移动位置</span></div><div class="line">wroxWin.moveTo(<span class="number">100</span>,<span class="number">100</span>);</div><div class="line"></div><div class="line">wroxWin.close();</div></pre></td></tr></table></figure>
<p>但是，这个方法仅适用于通过window.open()打开的弹出窗口。对于浏览器的主窗口，如果没有得到用户的允许是不能关闭它的。<br>弹出窗口倒是可以调用top.close()在不经用户允许的情况下关闭自己。<br>弹出窗口关闭之后，窗口的引用仍然还在，但除了检测其closed 属性之外，已经没有其他用处了。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">wroxWin.close();</div><div class="line">alert(wroxWin.closed); <span class="comment">//true</span></div></pre></td></tr></table></figure>
<p>新创建的window 对象有一个opener 属性，其中保存着打开它的原始窗口对象。<br>这个属性只在弹出窗口中的最外层window 对象(top)中有定义，而且指向调用window.open()的窗口或框架。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> wroxWin = <span class="built_in">window</span>.open(<span class="string">"http://www.wrox.com/"</span>,<span class="string">"wroxWindow"</span>,</div><div class="line"><span class="string">"height=400,width=400,top=10,left=10,resizable=yes"</span>);</div><div class="line">alert(wroxWin.opener == <span class="built_in">window</span>); <span class="comment">//true</span></div></pre></td></tr></table></figure>
<p>虽然弹出窗口中有一个指针指向打开它的原始窗口，但原始窗口中并没有这样的指针指向弹出窗口。<br>窗口并不跟踪记录它们打开的弹出窗口，因此我们只能在必要的时候自己来手动实现跟踪。</p>
<p>有些浏览器(如IE8 和Chrome)会在独立的进程中运行每个标签页。<br>当一个标签页打开另一个标签页时，如果两个window 对象之间需要彼此通信，那么新标签页就不能运行在独立的进程中。<br>在Chrome中，将新创建的标签页的opener 属性设置为null，即表示在单独的进程中运行新标签页。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> wroxWin = <span class="built_in">window</span>.open(<span class="string">"http://www.wrox.com/"</span>,<span class="string">"wroxWindow"</span>,</div><div class="line"><span class="string">"height=400,width=400,top=10,left=10,resizable=yes"</span>);</div><div class="line">wroxWin.opener = <span class="literal">null</span>;</div></pre></td></tr></table></figure>
<p>将opener 属性设置为null 就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可以在独立的进程中运行。<br>标签页之间的联系一旦切断，将没有办法恢复。</p>
<h4 id="安全限制"><a href="#安全限制" class="headerlink" title="安全限制"></a>安全限制</h4><p>曾经有一段时间，广告商在网上使用弹出窗口达到了肆无忌惮的程度。<br>浏览器为此施加了许多限制。<br>比如IE6 对弹出窗口施加了多方面的安全限制，包括不允许在屏幕之外创建弹出窗口、不允许将弹出窗口移动到屏幕以外、不允许关闭状态栏等。<br>IE7 则增加了更多的安全限制，如不允许关闭地址栏、默认情况下不允许移动弹出窗口或调整其大小。<br>等等等等。</p>
<p>此外，有的浏览器只根据用户操作来创建弹出窗口。这样一来，在页面尚未加载完成时调用window.open()的语句根本不会执行。<br>换句话说，只能通过单击或者击键来打开弹出窗口。(哦！所以现在带有广告的网盘之类的网站都在网页上覆盖上一层可点击的区域，一旦点击了就会弹出窗口；如果是以前早就全部自己弹出了，这都是安全限制改善的原因)</p>
<p>对于那些不是用户有意打开的弹出窗口，Chrome 采取了不同的处理方式。它不会像其他浏览器那样简单地屏蔽这些弹出窗口，而是只显示它们的标题栏，并把它们放在浏览器窗口的右下角。<br>在打开计算机硬盘中的网页时，IE 会解除对弹出窗口的某些限制。但是在服务器上执行这些代码会受到对弹出窗口的限制。</p>
<h4 id="弹出窗口屏蔽程序"><a href="#弹出窗口屏蔽程序" class="headerlink" title="弹出窗口屏蔽程序"></a>弹出窗口屏蔽程序</h4><p>大多数浏览器都内置有弹出窗口屏蔽程序，没有的也可以自己装工具。<br>结果就是用户可以将绝大多数不想看到弹出窗口屏蔽掉。<br>在弹出窗口被屏蔽时，就应该考虑两种可能性。如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么window.open()很可能会返回null。<br>此时，只要检测这个返回的值就可以确定弹出窗口是否被屏蔽了。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> wroxWin = <span class="built_in">window</span>.open(<span class="string">"http://www.wrox.com"</span>, <span class="string">"_blank"</span>);</div><div class="line"><span class="keyword">if</span> (wroxWin == <span class="literal">null</span>)&#123;</div><div class="line">    alert(<span class="string">"The popup was blocked!"</span>);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>如果是浏览器扩展或其他程序阻止的弹出窗口，那么window.open()通常会抛出一个错误。<br>因此，要想准确地检测出弹出窗口是否被屏蔽，必须在检测返回值的同时，将对window.open()的调用封装在一个try-catch 块中。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> blocked = <span class="literal">false</span>;</div><div class="line"><span class="keyword">try</span> &#123;</div><div class="line">    <span class="keyword">var</span> wroxWin = <span class="built_in">window</span>.open(<span class="string">"http://www.wrox.com"</span>, <span class="string">"_blank"</span>);</div><div class="line">    <span class="keyword">if</span> (wroxWin == <span class="literal">null</span>)&#123;</div><div class="line">        blocked = <span class="literal">true</span>;</div><div class="line">    &#125;</div><div class="line">&#125; <span class="keyword">catch</span> (ex)&#123;</div><div class="line">    blocked = <span class="literal">true</span>;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">if</span> (blocked)&#123;</div><div class="line">    alert(<span class="string">"The popup was blocked!"</span>);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>检测弹出窗口是否被屏蔽只是一方面，它并不会阻止浏览器显示与被屏蔽的弹出窗口有关的消息。</p>
<h3 id="间歇调用和超时调用"><a href="#间歇调用和超时调用" class="headerlink" title="间歇调用和超时调用"></a>间歇调用和超时调用</h3><p><strong>JavaScript 是单线程语言</strong>，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。<br>前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。(也就是指setTimeout()和setTimeInterval()这两种吧)</p>
<p>超时调用需要使用window 对象的setTimeout()方法。<br>接受两个参数：要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒)。<br>第一个参数可以是一个包含JavaScript 代码的字符串(就和在eval()函数中使用的字符串一样)，也可以是一个函数。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//不建议传递字符串！</span></div><div class="line">setTimeout(<span class="string">"alert('Hello world!') "</span>, <span class="number">1000</span>);</div><div class="line"><span class="comment">//推荐的调用方式</span></div><div class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    alert(<span class="string">"Hello world!"</span>);</div><div class="line">&#125;, <span class="number">1000</span>);</div></pre></td></tr></table></figure>
<p>由于传递字符串可能导致性能损失，因此不建议以字符串作为第一个参数。<br>第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。<br>JavaScript 是一个单线程序的解释器，因此一定时间内只能执行一段代码。<br>为了控制要执行的代码，就有一个JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。<br>setTimeout()的第二个参数告诉JavaScript 再过多长时间把当前任务添加到队列中。<br>如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。</p>
<p>调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。<br>这个超时调用ID 是计划执行代码的唯一标识符，可以通过它来取消超时调用。</p>
<p>要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID 作为参数传递给它。<br>只要是在指定的时间尚未过去之前调用clearTimeout()，就可以完全取消超时调用。</p>
<p>超时调用的代码都是在全局作用域中执行的，因此函数中this 的值在非严格模式下指向window 对象，在严格模式下是undefined。</p>
<p>设置间歇调用的方法是setInterval()，它接受的参数与setTimeout()相同。<br>调用setInterval()方法同样也会返回一个间歇调用ID，该ID 可用于在将来某个时刻取消间歇调用。<br>取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*使用setInterval()方法*/</span></div><div class="line"><span class="keyword">var</span> num = <span class="number">0</span>;</div><div class="line"><span class="keyword">var</span> max = <span class="number">10</span>;</div><div class="line"><span class="keyword">var</span> intervalId = <span class="literal">null</span>;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">incrementNumber</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    num++;</div><div class="line">    <span class="comment">//如果执行次数达到了max 设定的值，则取消后续尚未执行的调用</span></div><div class="line">    <span class="keyword">if</span> (num == max) &#123;</div><div class="line">        clearInterval(intervalId);</div><div class="line">        alert(<span class="string">"Done"</span>);</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">intervalId = setInterval(incrementNumber, <span class="number">500</span>);</div><div class="line"></div><div class="line"><span class="comment">/*使用setTimeout()方法*/</span></div><div class="line"><span class="keyword">var</span> num = <span class="number">0</span>;</div><div class="line"><span class="keyword">var</span> max = <span class="number">10</span>;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">incrementNumber</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    num++;</div><div class="line">    <span class="comment">//如果执行次数未达到max 设定的值，则设置另一次超时调用</span></div><div class="line">    <span class="keyword">if</span> (num &lt; max) &#123;</div><div class="line">        setTimeout(incrementNumber, <span class="number">500</span>);</div><div class="line">    &#125; <span class="keyword">else</span> &#123;</div><div class="line">        alert(<span class="string">"Done"</span>);</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">setTimeout(incrementNumber, <span class="number">500</span>);</div></pre></td></tr></table></figure>
<p>可见，在使用超时调用时，没有必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。<br>一般认为，使用超时调用来模拟间歇调用的是一种最佳模式。在开发环境下，<strong>很少使用真正的间歇调用</strong>，原因是<strong>后一个间歇调用可能会在前一个间歇调用结束之前启动</strong>。<br>而像前面示例中那样使用超时调用，则完全可以避免这一点。所以，最好不要使用间歇调用。</p>
<h3 id="系统对话框"><a href="#系统对话框" class="headerlink" title="系统对话框"></a>系统对话框</h3><p>浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示消息。<br>系统对话框与在浏览器中显示的网页没有关系，也不包含HTML。<br>它们的外观由操作系统及(或)浏览器设置决定，而不是由CSS 决定。<br>此外，通过这几个方法打开的对话框都是同步和模态的。也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。</p>
<ol>
<li>alert()方法，这个方法接受一个字符串并将其显示给用户。<br> 通常使用alert()生成的“警告”对话框向用户显示一些他们无法控制的消息，例如错误消息。而用户只能在看完消息后关闭对话框。</li>
<li><p>confirm()方法主要区别在于“确认”对话框除了显示OK 按钮外，还会显示一个Cancel(“取消”)按钮，两个按钮可以让用户决定是否执行给定的操作。<br> 为了确定用户是单击了OK 还是Cancel，可以检查confirm()方法返回的布尔值：true 表示单击了OK，false 表示单击了Cancel 或单击了右上角的X 按钮。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span> (confirm(<span class="string">"Are you sure?"</span>)) &#123;</div><div class="line">    alert(<span class="string">"I'm so glad you're sure! "</span>);</div><div class="line">&#125; <span class="keyword">else</span> &#123;</div><div class="line">    alert(<span class="string">"I'm sorry to hear you're not sure. "</span>);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>prompt()方法接受两个参数：要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> result = prompt(<span class="string">"What is your name? "</span>, <span class="string">""</span>);</div><div class="line"><span class="keyword">if</span> (result !== <span class="literal">null</span>) &#123;</div><div class="line">    alert(<span class="string">"Welcome, "</span> + result);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
</ol>
<p>由于不涉及HTML、CSS 或JavaScript，因此它们是增强Web 应用程序的一种便捷方式。<br>除了上述三种对话框之外，Google Chrome 浏览器还引入了一种新特性。<br>如果当前脚本在执行过程中会打开两个或多个对话框，那么从第二个对话框开始，每个对话框中都会显示一个复选框，以便用户阻止后续的对话框显示，除非用户刷新页面。<br>如果用户勾选了其中的复选框，并且关闭了对话框，那么除非用户刷新页面，所有后续的系统对话框(包括警告框、确认框和提示框)都会被屏蔽。<br>这个新特性出现以后，IE9 和Firefox 4 也实现了它。</p>
<p>还有两个可以通过JavaScript 打开的对话框，即“查找”和“打印”。<br>在JavaScript 中可以通过window 对象的find()和print()方法打开它们。<br>这两个方法同样不会就用户在对话框中的操作给出任何信息，因此它们的用处有限。<br>另外，既然这两个对话框是异步显示的，那么Chrome 的对话框计数器就不会将它们计算在内，<br>所以它们也不会受用户禁用后续对话框显示的影响。</p>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>


    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/Web/" rel="tag"># Web</a>
          
            <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2016/09/27/regex/" rel="next" title="正则表达式，治疗强迫症">
                <i class="fa fa-chevron-left"></i> 正则表达式，治疗强迫症
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2016/09/30/javascript-note-09-1/" rel="prev" title="《 JavaScript 高级程序设计》备忘-第九章-1">
                《 JavaScript 高级程序设计》备忘-第九章-1 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/uploads/avatar.jpg"
               alt="Huang SJ" />
          <p class="site-author-name" itemprop="name">Huang SJ</p>
          <p class="site-description motion-element" itemprop="description"></p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">75</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">4</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">9</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/hsj1992" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://twitter.com/hsj9527" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                  Twitter
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/u/1694147905" target="_blank" title="Weibo">
                  
                    <i class="fa fa-fw fa-weibo"></i>
                  
                  Weibo
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.freecodecamp.cn/hsj1992" target="_blank" title="FreeCodeCamp">
                  
                    <i class="fa fa-fw fa-fire"></i>
                  
                  FreeCodeCamp
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://codepen.io/hsj1992/" target="_blank" title="codepen">
                  
                    <i class="fa fa-fw fa-codepen"></i>
                  
                  codepen
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://hsj1992.oschina.io/" target="_blank" title="码云镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  码云镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.coding.me/" target="_blank" title="coding镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  coding镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.github.io/" target="_blank" title="github镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  github镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://codingme-6dd8a.firebaseapp.com" target="_blank" title="Firebase镜像">
                  
                    <i class="fa fa-fw fa-google"></i>
                  
                  Firebase镜像
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#BOM"><span class="nav-number">1.</span> <span class="nav-text">BOM</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#window-对象"><span class="nav-number">1.1.</span> <span class="nav-text">window 对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#全局作用域"><span class="nav-number">1.1.1.</span> <span class="nav-text">全局作用域</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#窗口关系及框架"><span class="nav-number">1.1.2.</span> <span class="nav-text">窗口关系及框架</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#窗口位置"><span class="nav-number">1.1.3.</span> <span class="nav-text">窗口位置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#窗口大小"><span class="nav-number">1.1.4.</span> <span class="nav-text">窗口大小</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#导航和打开窗口"><span class="nav-number">1.1.5.</span> <span class="nav-text">导航和打开窗口</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#弹出窗口"><span class="nav-number">1.1.5.1.</span> <span class="nav-text">弹出窗口</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#安全限制"><span class="nav-number">1.1.5.2.</span> <span class="nav-text">安全限制</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#弹出窗口屏蔽程序"><span class="nav-number">1.1.5.3.</span> <span class="nav-text">弹出窗口屏蔽程序</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#间歇调用和超时调用"><span class="nav-number">1.1.6.</span> <span class="nav-text">间歇调用和超时调用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#系统对话框"><span class="nav-number">1.1.7.</span> <span class="nav-text">系统对话框</span></a></li></ol></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2015 - 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Huang SJ</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.ui.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.pack.js"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.0"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  



  




	




  
  
  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length == 0) {
      search_path = "search.xml";
    }
    var path = "/" + search_path;
    // monitor main search box;

    function proceedsearch() {
      $("body").append('<div class="popoverlay">').css('overflow', 'hidden');
      $('.popup').toggle();
    }
    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';
      $.ajax({
        url: path,
        dataType: "xml",
        async: true,
        success: function( xmlResponse ) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = $( "entry", xmlResponse ).map(function() {
            return {
              title: $( "title", this ).text(),
              content: $("content",this).text(),
              url: $( "url" , this).text()
            };
          }).get();
          var $input = document.getElementById(search_id);
          var $resultContent = document.getElementById(content_id);
          $input.addEventListener('input', function(){
            var matchcounts = 0;
            var str='<ul class=\"search-result-list\">';
            var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
            $resultContent.innerHTML = "";
            if (this.value.trim().length > 1) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var content_index = [];
                var data_title = data.title.trim().toLowerCase();
                var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                var data_url = decodeURIComponent(data.url);
                var index_title = -1;
                var index_content = -1;
                var first_occur = -1;
                // only match artiles with not empty titles and contents
                if(data_title != '') {
                  keywords.forEach(function(keyword, i) {
                    index_title = data_title.indexOf(keyword);
                    index_content = data_content.indexOf(keyword);
                    if( index_title >= 0 || index_content >= 0 ){
                      isMatch = true;
                      if (i == 0) {
                        first_occur = index_content;
                      }
                    }

                  });
                }
                // show search results
                if (isMatch) {
                  matchcounts += 1;
                  str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
                  var content = data.content.trim().replace(/<[^>]+>/g,"");
                  if (first_occur >= 0) {
                    // cut out 100 characters
                    var start = first_occur - 20;
                    var end = first_occur + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if(start == 0){
                      end = 50;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    var match_content = content.substring(start, end);
                    // highlight all keywords
                    keywords.forEach(function(keyword){
                      var regS = new RegExp(keyword, "gi");
                      match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
                    });

                    str += "<p class=\"search-result\">" + match_content +"...</p>"
                  }
                  str += "</li>";
                }
              })};
            str += "</ul>";
            if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
            if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
            $resultContent.innerHTML = str;
          });
          proceedsearch();
        }
      });}

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched == false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(function(e){
      $('.popup').hide();
      $(".popoverlay").remove();
      $('body').css('overflow', '');
    });
    $('.popup').click(function(e){
      e.stopPropagation();
    });
  </script>


  

  

  

  


</body>
</html>
